<template>
  <div class="btn_warp" style="height:32px;width: 100%;padding-top: 5px;padding-bottom: 10px">
    <el-button type="success" plain class="btn_add" style="width:100px" @click="onAddItem">添加</el-button>
    <el-button type="danger" plain class="btn_delete" style="width: 100px" @click="onDeleteItem">删除</el-button>
    <el-button type="success" style="float: right;margin-right: 30px" @click.prevent="handleSearch">查询</el-button>
    <el-button type="success" style="float: right;margin-right: 5px" @click.prevent="handleClean">全部清空</el-button>
    <el-input v-model="search3" clearable placeholder="按联系电话查询" style="float: right;width: 250px;margin-right: 15px"/>
    <el-input v-model="search2" clearable placeholder="按物业地址查询" style="float: right;width: 250px;margin-right: 15px"/>
    <el-input v-model="search1" clearable placeholder="按住户姓名查询" style="float: right;width: 250px;margin-right: 15px"/>
  </div>
  <el-table @selection-change="handleSelsChange" :data="filterTableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe border style="width: 100%;" max-height="472" height="472" :cell-style="{ textAlign: 'center' }">
    <el-table-column type="selection" width="40" >
    </el-table-column>
    <el-table-column fixed prop="" label="序号" width="70" :show-overflow-tooltip="true">
      <template #default="scope">
        {{scope.$index+1}}
      </template>
    </el-table-column>
    <el-table-column fixed prop="householdName" label="姓名" width="120" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdName" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdName }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdSex" label="性别" width="85" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-select v-model="scope.row.householdSex" placeholder="选择" size="small">
                <el-option v-for="item in sexOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
        <span v-else>{{ scope.row.householdSex }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="propertyAddress" label="物业地址" width="100" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px" class="table-input" v-model="scope.row.propertyAddress" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.propertyAddress }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdRelation" label="与业主关系" width="100" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-select v-model="scope.row.householdRelation" placeholder="选择" size="small">
                <el-option v-for="item in relationOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </span>
        <span v-else>{{ scope.row.householdRelation }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdPhone" label="联系电话" width="150" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdPhone" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdPhone }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdIntime" label="入住时间" width="150" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-date-picker value-format="YYYY-MM-DD" size="small" style="width: 120px ;" v-model="scope.row.householdIntime" type="date" placeholder="选择一个日期"></el-date-picker>
            </span>
        <span v-else>{{ scope.row.householdIntime }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdBirthplace" label="籍贯" width="100" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdBirthplace" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdBirthplace }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdIdcard" label="身份证号" width="175" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdIdcard" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdIdcard }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdWorkplace" label="工作单位" width="175" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdWorkplace" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdWorkplace }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdWorkaddress" label="工作地址" width="175" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdWorkaddress" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdWorkaddress }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdUnitemail" label="单位邮箱" width="175" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdUnitemail" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdUnitemail }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdBank" label="开户银行" width="130" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdBank" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdBank }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdBankAccount" label="银行账号" width="150" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
              <el-input input-style="height:23px;" class="table-input" v-model="scope.row.householdBankAccount" maxlength="30" size="large"/>
            </span>
        <span v-else>{{ scope.row.householdBankAccount }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="householdOuttime" label="迁出时间" width="150" :show-overflow-tooltip="true">
      <template #default="scope">
            <span v-if="scope.row.isUpdate">
               <el-date-picker value-format="YYYY-MM-DD" size="small" style="width: 120px ;" v-model="scope.row.householdOuttime" type="date" placeholder="选择一个日期"></el-date-picker>
            </span>
        <span v-else>{{ scope.row.householdOuttime }}</span>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="265" :show-overflow-tooltip="true">
      <template #default="scope">
        <el-button type="warning" round size="small" @click.prevent="updateRow(scope.$index)">修改</el-button>
        <el-button type="primary" round size="small" @click.prevent="saveRow(scope.$index,scope.row.householdId)">保存</el-button>
        <el-button type="danger" round size="small" @click.prevent="deleteRow(scope.row.householdId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page_warp">
    <el-pagination  background @current-change="handleCurrentChange" v-model:page-size="pageSize" v-model:current-page="currentPage" layout="prev, pager, next , jumper" :total="filterTableData.length"></el-pagination>
  </div>
</template>

<script>
  import { ElMessage,ElMessageBox } from 'element-plus'
  import { ref,onMounted } from 'vue'
  import {nanoid} from 'nanoid'
  import axios from "axios"
  //引入时间格式化
  import moment from "moment"
  import {useRouter} from 'vue-router'

  export default {
    name: "HouseHold",
    setup(){
      const tableSels=ref([])
      const tableData = ref([])
      const pageSize=ref(10)
      const currentPage=ref(1)
      const router=useRouter()
      const sexOptions=[
        {
          value:'男',
          label:'男'
        },
        {
          value:'女',
          label:'女'
        }
      ]
      const relationOptions=[
        {
          value:'业主',
          label:'业主'
        },
        {
          value:'父亲',
          label:'父亲'
        },
        {
          value:'母亲',
          label:'母亲'
        },
        {
          value:'子女',
          label:'子女'
        },
        {
          value:'亲戚',
          label:'亲戚'
        },
        {
          value:'朋友',
          label:'朋友'
        }
      ]
      const search1=ref('')
      const search2=ref('')
      const search3=ref('')
      //条件过滤
      let filterTableData =ref([])

      //按条件进行查询
      function handleSearch(){
        filterTableData.value=tableData.value.filter(
            (data) => data.householdName.toLowerCase().includes(search1.value.toLowerCase()) //匹配姓名
                && data.propertyAddress.toLowerCase().includes(search2.value.toLowerCase()) //匹配物业地址
                && data.householdPhone.toLowerCase().includes(search3.value.toLowerCase()) //匹配联系电话
        )
      }
      //清空查询条件
      function handleClean(){
        search1.value=''
        search2.value=''
        search3.value=''
      }
      //选择添加事件
      function onAddItem(){
        tableData.value.push({
          householdId:nanoid(),   //住户id
          householdForeignkey:'',   //房产id
          householdName: '',  //姓名
          householdSex: '男',  //性别
          propertyAddress: '',  //物业地址(通过房产号获得)
          householdRelation: '业主',  //与业主关系
          householdPhone: '',  //联系电话
          householdIntime: formatDate(new Date()),  //入住时间
          householdBirthplace: '',  //籍贯
          householdIdcard: '',  //身份证号
          householdWorkplace: '',  //工作单位
          householdWorkaddress: '',  //工作地址
          householdUnitemail: '',  //单位邮箱
          householdBank: '',  //开户银行
          householdBankAccount: '',  //银行账号
          householdOuttime:'' ,  //迁出时间
          isUpdate:true,   //是否为编辑状态
          isAdd:true,    //是否为新增状态
        })
        currentPage.value=Math.ceil(tableData.value.length/pageSize.value)
      }
      //选择删除事件
      function onDeleteItem(){
        ElMessageBox.confirm('确认删除此记录吗？', '警告', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}).then(() => {
          tableSels.value.forEach((tableSel)=>{
            tableData.value.forEach((item,index)=>{
              if(item.householdId===tableSel.householdId){
                tableData.value.splice(index,1)
                axios.get('http://localhost:8085/deleteHousehold',{
                  params:{
                    householdId:item.householdId,   //住户id
                  }
                }).then(
                    ()=>{
                      ElMessage({type:'success',message:'删除成功！'})
                    },
                    ()=>{
                      ElMessage({type:'error',message:'删除失败！'})
                      setTimeout(()=>{
                        router.go(0)
                      },500)
                    }
                )
              }
            })
          })
        }).catch(() => {
          ElMessage({type: 'info', message: '删除失败！',})
        })
      }
      //行修改事件
      function updateRow(index) {
          filterTableData.value[pageSize.value * (currentPage.value - 1) + index].isUpdate = true
      }
      //行保存事件
      function saveRow(index){
        let householdObj=filterTableData.value[pageSize.value*(currentPage.value-1)+index]
        if(!householdObj.isUpdate){
          ElMessage({message:'没有数据需要保存！'})
        }else if(householdObj.householdName === ''){  //判断姓名与物业地址是否为空
          ElMessage({message:'姓名不能为空！'})
        }else if(householdObj.propertyAddress === ''){
          ElMessage({message:'物业地址不能为空！'})
        }else if(householdObj.isAdd) {
          if(isRepeat(householdObj,index)) return
          axios.get('http://localhost:8085/hasPropertyAddress',{
            params:{
              propertyAddress:householdObj.propertyAddress,   //住户id
            }
          }).then(
              (resp)=>{
                if(resp.data){
                  //2.存在则请求进行数据保存获取住户编号以及房产编号
                  axios.get('http://localhost:8085/addHousehold',{
                    params:{
                      householdId:householdObj.householdId,   //住户id
                      householdForeignkey:householdObj.householdForeignkey,   //房产id
                      householdName:householdObj.householdName,  //姓名
                      householdSex:householdObj.householdSex,  //性别
                      propertyAddress:householdObj.propertyAddress,  //物业地址(通过房产号获得)
                      householdRelation:householdObj.householdRelation,  //与业主关系
                      householdPhone:householdObj.householdPhone,  //联系电话
                      householdIntime:householdObj.householdIntime,  //入住时间
                      householdBirthplace:householdObj.householdBirthplace,  //籍贯
                      householdIdcard:householdObj.householdIdcard,  //身份证号
                      householdWorkplace:householdObj.householdWorkplace,  //工作单位
                      householdWorkaddress:householdObj.householdWorkaddress,  //工作地址
                      householdUnitemail:householdObj.householdUnitemail,  //单位邮箱
                      householdBank:householdObj.householdBank,  //开户银行
                      householdBankAccount:householdObj.householdBankAccount,  //银行账号
                      householdOuttime:householdObj.householdOuttime,  //迁出时间
                    }
                  }).then(
                      ()=>{
                        ElMessage({type:'success',message:'保存成功！'})
                        //4.关闭输入框
                        householdObj.isUpdate=false
                        householdObj.isAdd=false
                      },
                      ()=>{
                        ElMessage({type:'error',message:'保存失败！'})
                      }
                  )
                }else{
                  //3.不存在则进行信息提示
                  ElMessage({type:'error',message:'物业地址不存在！'})
                }
              },
              ()=>{
                ElMessage({type:'error',message:'保存失败！'})
              }
          )
        } else{
          if(isRepeat(householdObj,index)) return
          //1.发送请求判断物业地址是否存在
          axios.get('http://localhost:8085/hasPropertyAddress',{
            params:{
              propertyAddress:householdObj.propertyAddress,   //住户id
            }
          }).then(
              (resp)=>{
                if(resp.data){
                  //2.存在则请求进行数据保存获取住户编号以及房产编号
                  axios.get('http://localhost:8085/updateHousehold',{
                    params:{
                      householdId:householdObj.householdId,   //住户id
                      householdForeignkey:householdObj.householdForeignkey,   //房产id
                      householdName:householdObj.householdName,  //姓名
                      householdSex:householdObj.householdSex,  //性别
                      propertyAddress:householdObj.propertyAddress,  //物业地址(通过房产号获得)
                      householdRelation:householdObj.householdRelation,  //与业主关系
                      householdPhone:householdObj.householdPhone,  //联系电话
                      householdIntime:householdObj.householdIntime,  //入住时间
                      householdBirthplace:householdObj.householdBirthplace,  //籍贯
                      householdIdcard:householdObj.householdIdcard,  //身份证号
                      householdWorkplace:householdObj.householdWorkplace,  //工作单位
                      householdWorkaddress:householdObj.householdWorkaddress,  //工作地址
                      householdUnitemail:householdObj.householdUnitemail,  //单位邮箱
                      householdBank:householdObj.householdBank,  //开户银行
                      householdBankAccount:householdObj.householdBankAccount,  //银行账号
                      householdOuttime:householdObj.householdOuttime,  //迁出时间
                    }
                  }).then(
                      ()=>{
                        ElMessage({type:'success',message:'保存成功！'})
                        //4.关闭输入框
                        householdObj.isUpdate=false
                      },
                      ()=>{
                        ElMessage({type:'error',message:'保存失败！'})
                      }
                  )
                }else{
                  //3.不存在则进行信息提示
                  ElMessage({type:'error',message:'物业地址不存在！'})
                }
              },
              ()=>{
                ElMessage({type:'error',message:'保存失败！'})
              }
          )
        }
      }
      //行删除事件
      function deleteRow(householdId){
        ElMessageBox.confirm('确认删除此记录吗？', '警告', {confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning',}).then(() => {
          tableData.value.forEach((item,index)=>{
            if(item.householdId===householdId){
              axios.get('http://localhost:8085/deleteHousehold',{
                params:{
                  householdId:item.householdId,   //住户id
                }
              }).then(
                  ()=>{
                    ElMessage({type:'success',message:'删除成功！'})
                    tableData.value.splice(index,1)
                  },
                  ()=>{
                    ElMessage({type:'error',message:'删除失败！'})
                  }
              )
            }
          })
        }).catch(() => {
          ElMessage({type: 'info', message: '删除失败！',})
        })
      }
      //分页事件
      function handleCurrentChange(value){
        currentPage.value = value;
      }
      //处理多选
      const handleSelsChange=(sels)=>{
        tableSels.value=sels
      }
      //挂载加载数据
      onMounted(()=>{
        axios.get('http://localhost:8085/getHousehold').then(
            (response)=>{
              tableData.value=response.data
              filterTableData.value=response.data
            },
            ()=>{
            }
        )
      })
      //格式化Date类型
      function formatDate(val) {
        if(isNaN(val)) return ''
        const date = new Date(Number(val)); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        const Y = date.getFullYear() + "-";
        const M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
        const D = date.getDate() + " ";
        // const h = date.getHours() + ":";
        // const m = date.getMinutes() + ":";
        // const s = (date.getSeconds() < 10 ? "0" + (date.getSeconds()) : date.getSeconds());
        return Y + M + D;
      }
      //判断记录是否重复
      function isRepeat(Obj,index){
        let tip=0
        tableData.value.forEach((item,indexx)=>{
          if(Obj.propertyAddress==item.propertyAddress && Obj.householdName==item.householdName && (pageSize.value*(currentPage.value-1)+index)!=indexx){
            tip=1
          }
        })
        if(tip==1){
          ElMessage({type:'error',message:'保存失败,该住户信息记录已存在！'})
          return true
        }else{
          return false
        }
      }

      return{
        tableSels,
        tableData,
        filterTableData,
        search1,
        search2,
        search3,
        pageSize,
        currentPage,
        formatDate,
        onAddItem,
        onDeleteItem,
        updateRow,
        saveRow,
        deleteRow,
        handleCurrentChange,
        handleSelsChange,
        moment,
        sexOptions,
        relationOptions,
        isRepeat,
        handleSearch,
        handleClean
      }
    }
  }
</script>

<style scoped>
  .el-table{
    /*padding: 20px 20px 20px 20px;*/
  }
  .page_warp{
    width: 600px;
    margin: 5px auto;
    height: 40px;
  }
  .el-pagination{
    margin-right: 50px;
  }
  .demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
  }

  .demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color-base);
    flex: 1;
  }
  .demo-date-picker .block:last-child {
    border-right: none;
  }
  .demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>